<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>统计页面</title>
<script src="plugin/echart/echarts.min.js"></script>
<script src="plugin/echart/china.js"></script>
<script src="plugin/echart/geoMap.js"></script>
<script src="plugin/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:500px;"></div>
<script type="text/javascript">
    //根据data得到每个data中城市的坐标
    var convertData = function (data) {
       var res = [];
       for (var i = 0; i < data.length; i++) {
           var geoCoord = geoCoordMap[data[i].name];//获取城市的坐标
           if (geoCoord) {
               res.push({
                   name: data[i].name,
                   value: geoCoord.concat(data[i].value)
               });
           }
       }
       return res;
    };
    
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    $.get('/goods/sellData').done(function (data) {
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption({
           backgroundColor: '#404a59',
           title: {
               text: '全国主要城市特产销量',
               left: 'center',
               textStyle: {
                   color: '#fff'
               }
           },
           tooltip : {
               trigger: 'item',
               formatter: function (params) {
                    return params.name + ' : ' + params.value[2];
               }
           },
           legend: {
               orient: 'vertical',
               y: 'bottom',
               x:'right',
               data:['销量'],
               textStyle: {
                   color: '#fff'
               }
           },
           visualMap: {
                min: 0,
                max: 1000,
                calculable: true,
                inRange: {
                    color: ['#50a3ba', '#eac736', '#d94e5d']
                },
                textStyle: {
                    color: '#fff'
                }
            },
           geo: {
               map: 'china',
               label: {
                   emphasis: {
                       show: false
                   }
               },
               roam: true,
               itemStyle: {
                   normal: {
                       areaColor: '#323c48',
                       borderColor: '#111'
                   },
                   emphasis: {
                       areaColor: '#2a333d'
                   }
               }
           },
           series : [
               {
                   name: '销量',
                   type: 'scatter',
                   coordinateSystem: 'geo',
                   data: convertData(data),
                   symbolSize: function (val) {
                       return val[2] / 10;
                   },
                   label: {
                       normal: {
                           formatter: '{b}',
                           position: 'right',
                           show: false
                       },
                       emphasis: {
                           show: true
                       }
                   },
                   itemStyle: {
                       normal: {
                           color: '#ddb926'
                       }
                   }
               },
               {
                   name: '销量',
                   type: 'effectScatter',
                   coordinateSystem: 'geo',
                   data: convertData(data),
                   symbolSize: function (val) {
                       return val[2] / 10;
                   },
                   showEffectOn: 'render',
                   rippleEffect: {
                       brushType: 'stroke'
                   },
                   hoverAnimation: true,
                   label: {
                       normal: {
                           formatter: '{b}',
                           position: 'right',
                           show: true
                       }
                   },
                   itemStyle: {
                       normal: {
                           color: '#f4e925',
                           shadowBlur: 10,
                           shadowColor: '#333'
                       }
                   },
                   zlevel: 1
               }
           ]
        });
    })
</script>
</body>
</html>